Testování výkonu frontendu: Integrace Lighthouse CI pro neustálé zlepšování

V dnešním digitálním světě je výkon webových stránek prvořadý. Pomalé načítání, problémy s přístupností a špatné SEO mohou výrazně ovlivnit uživatelský zážitek a následně i obchodní výsledky. Testování výkonu frontendu se stalo nezbytnou součástí moderního životního cyklu vývoje softwaru, které zajišťuje, že webové stránky a aplikace jsou rychlé, spolehlivé a uživatelsky přívětivé pro globální publikum. Tento článek se zabývá integrací Lighthouse CI, výkonného open-source nástroje, do vašeho procesu kontinuální integrace (CI) za účelem automatizace testování výkonu frontendu a podpory neustálého zlepšování.

Proč je testování výkonu frontendu důležité?

Než se ponoříme do Lighthouse CI, pojďme si vysvětlit, proč je testování výkonu frontendu klíčové:

• Uživatelský zážitek: Rychlý a responzivní web poskytuje lepší uživatelský zážitek, což vede ke zvýšenému zapojení a snížení míry okamžitého opuštění. Představte si potenciálního zákazníka v Tokiu v Japonsku, jak se snaží koupit produkt na pomalu se načítajícím e-shopu. Pravděpodobně stránku opustí a bude hledat alternativy.
• Pořadí ve vyhledávačích (SEO): Vyhledávače jako Google považují rychlost a výkon webu za faktory hodnocení. Rychlejší weby se obvykle umisťují výše ve výsledcích vyhledávání, což přináší více organické návštěvnosti. Iniciativa Google Core Web Vitals zdůrazňuje důležitost faktorů jako Largest Contentful Paint (LCP), First Input Delay (FID) a Cumulative Layout Shift (CLS) pro SEO.
• Přístupnost: Zlepšení výkonu často vede k lepší přístupnosti pro uživatele s postižením. Optimalizovaný kód a obrázky mohou zlepšit zážitek pro uživatele, kteří se spoléhají na čtečky obrazovky, nebo pro ty s omezenou šířkou pásma.
• Míra konverze: Rychlejší web může přímo ovlivnit míru konverze. Studie ukázaly, že i jednovteřinové zpoždění v načítání stránky může vést k významnému poklesu konverzí. Představte si uživatele v Bombaji v Indii, jak se snaží rezervovat let. Pomalý proces rezervace by ho mohl vést k opuštění nákupu a výběru konkurence.
• Optimalizace zdrojů: Testování výkonu pomáhá identifikovat oblasti, kde lze zdroje optimalizovat, což vede k úsporám nákladů na serverovou infrastrukturu a využití šířky pásma.

Představení Lighthouse CI

Lighthouse CI je open-source, automatizovaný nástroj navržený pro bezproblémovou integraci s vaším CI/CD procesem. Spouští Lighthouse, populární auditovací nástroj vyvinutý společností Google, a poskytuje přehled o výkonu, přístupnosti, SEO, osvědčených postupech a souladu s Progressive Web App (PWA) vašich webových stránek. Lighthouse CI vám pomůže:

• Automatizovat audity výkonu: Spouštějte audity Lighthouse automaticky s každým commitem nebo pull requestem.
• Sledovat výkon v průběhu času: Monitorujte metriky výkonu v čase a včas identifikujte regrese.
• Nastavit rozpočty výkonu: Definujte rozpočty výkonu a v případě jejich překročení selžete sestavení (build).
• Integrovat se systémy CI/CD: Integrujte s populárními systémy CI/CD jako jsou GitHub Actions, GitLab CI, CircleCI a Jenkins.
• Spolupracovat na řešení problémů s výkonem: Sdílejte reporty Lighthouse a spolupracujte se svým týmem na řešení problémů s výkonem.

Nastavení Lighthouse CI

Zde je podrobný průvodce nastavením Lighthouse CI ve vašem projektu:

1. Instalace Lighthouse CI

Nainstalujte Lighthouse CI CLI globálně pomocí npm nebo yarn:

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Konfigurace Lighthouse CI

Vytvořte soubor lighthouserc.js v kořenovém adresáři vašeho projektu pro konfiguraci Lighthouse CI. Zde je příklad konfigurace:

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

Pojďme si tuto konfiguraci rozebrat:

• collect.url: Pole URL adres k auditování. Tento příklad audituje domovskou stránku a stránku „o nás“. Měli byste zahrnout všechny klíčové stránky vašeho webu s ohledem na různé případy použití. Například e-shop by mohl zahrnovat domovskou stránku, stránky s výpisem produktů, stránky s detailem produktu a proces pokladny.
• collect.startServerCommand: Příkaz pro spuštění vašeho vývojového serveru. To je nezbytné, pokud Lighthouse CI potřebuje běžet proti lokálnímu vývojovému prostředí.
• collect.numberOfRuns: Počet spuštění auditů Lighthouse pro každou URL. Spuštění více auditů pomáhá zmírnit odchylky v síťových podmínkách a dalších faktorech.
• assert.assertions: Sada tvrzení (assertions) pro validaci výsledků auditu Lighthouse. Každé tvrzení specifikuje metriku nebo kategorii a prahovou hodnotu. Pokud prahová hodnota není splněna, sestavení (build) selže. Tento příklad nastavuje prahové hodnoty pro kategorie výkon, přístupnost, osvědčené postupy a SEO. Také nastavuje prahové hodnoty pro specifické metriky jako First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT) a Cumulative Layout Shift (CLS).
• upload.target: Určuje, kam se mají nahrát reporty Lighthouse. temporary-redirect nahraje reporty na dočasné úložiště a poskytne URL pro jejich zobrazení. Další možnosti zahrnují použití Lighthouse CI serveru nebo cloudových úložišť jako Google Cloud Storage nebo Amazon S3.

3. Integrace s vaším CI/CD systémem

Dalším krokem je integrace Lighthouse CI do vašeho CI/CD procesu. Zde je příklad, jak jej integrovat s GitHub Actions:

Vytvořte soubor .github/workflows/lighthouse.yml ve vašem repozitáři:

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Tento workflow provádí následující kroky:

• Stáhne kód (checkout).
• Nastaví Node.js.
• Nainstaluje závislosti.
• Spustí Lighthouse CI. Tento krok nejprve sestaví aplikaci (npm run build), a poté spustí lhci autorun, který provede audity Lighthouse a ověří výsledky oproti nakonfigurovaným prahovým hodnotám.

Přizpůsobte tento workflow vašemu konkrétnímu CI/CD systému a požadavkům projektu. Například, pokud používáte GitLab CI, nakonfigurovali byste soubor .gitlab-ci.yml s podobnými kroky.

4. Spuštění Lighthouse CI

Commitněte své změny a pushněte je do svého repozitáře. CI/CD proces automaticky spustí Lighthouse CI. Pokud některé z tvrzení selže, sestavení selže, což poskytne cennou zpětnou vazbu vývojářům. Reporty Lighthouse CI budou k dispozici na URL adrese poskytnuté CI/CD systémem.

Pokročilá konfigurace a přizpůsobení

Lighthouse CI nabízí širokou škálu konfiguračních možností a možností přizpůsobení. Zde jsou některé pokročilé funkce:

1. Použití Lighthouse CI serveru

Lighthouse CI server poskytuje centralizovaný dashboard pro sledování metrik výkonu v čase, správu projektů a spolupráci na řešení problémů s výkonem. Chcete-li použít Lighthouse CI server, musíte si nastavit instanci a nakonfigurovat váš soubor lighthouserc.js tak, aby nahrával reporty na server.

Nejprve nasaďte server. Existují různé možnosti nasazení, včetně Dockeru, Heroku a cloudových poskytovatelů jako AWS a Google Cloud. Podrobné pokyny k nasazení serveru naleznete v dokumentaci Lighthouse CI.

Jakmile je server spuštěn, aktualizujte váš soubor lighthouserc.js tak, aby odkazoval na server:

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

Nahraďte YOUR_LHCI_SERVER_URL URL adresou vašeho Lighthouse CI serveru a YOUR_LHCI_SERVER_TOKEN tokenem vygenerovaným serverem. Token autentizuje váš CI proces se serverem.

2. Nastavení rozpočtů výkonu

Rozpočty výkonu definují přijatelné prahové hodnoty pro specifické metriky. Lighthouse CI vám umožňuje nastavit rozpočty výkonu a selhat sestavení, pokud jsou tyto rozpočty překročeny. To pomáhá předcházet regresím výkonu a zajišťuje, že váš web zůstane v přijatelných mezích výkonu.

Rozpočty výkonu můžete definovat ve vašem souboru lighthouserc.js pomocí vlastnosti assert.assertions. Například, pro nastavení rozpočtu výkonu pro First Contentful Paint (FCP), můžete přidat následující tvrzení:

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Toto tvrzení způsobí selhání sestavení, pokud je FCP vyšší než 2500 milisekund.

3. Přizpůsobení konfigurace Lighthouse

Lighthouse CI vám umožňuje přizpůsobit konfiguraci Lighthouse tak, aby vyhovovala vašim specifickým potřebám. Můžete konfigurovat různá nastavení Lighthouse, jako jsou:

• onlyAudits: Specifikujte seznam auditů, které se mají spustit.
• skipAudits: Specifikujte seznam auditů, které se mají přeskočit.
• throttling: Nakonfigurujte nastavení omezování sítě pro simulaci různých síťových podmínek.
• formFactor: Specifikujte form factor (desktop nebo mobil), který se má emulovat.
• screenEmulation: Nakonfigurujte nastavení emulace obrazovky.

Chcete-li přizpůsobit konfiguraci Lighthouse, můžete příkazu lhci autorun předat příznak --config-path, který ukazuje na vlastní konfigurační soubor Lighthouse. Úplný seznam konfiguračních možností naleznete v dokumentaci Lighthouse.

4. Auditování stránek vyžadujících autentizaci

Auditování stránek vyžadujících autentizaci vyžaduje mírně odlišný přístup. Musíte Lighthouse CI poskytnout způsob, jak se autentizovat před spuštěním auditů. Toho lze dosáhnout pomocí cookies nebo skriptováním přihlašovacího procesu.

Jedním běžným přístupem je použití příznaku --extra-headers k předání autentizačních cookies do Lighthouse CI. Cookies můžete získat z vývojářských nástrojů vašeho prohlížeče po přihlášení na web.

Alternativně můžete použít skript v Puppeteer k automatizaci přihlašovacího procesu a poté spustit audity Lighthouse na autentizovaných stránkách. Tento přístup poskytuje větší flexibilitu a umožňuje řešit složité scénáře autentizace.Osvědčené postupy pro testování výkonu frontendu s Lighthouse CI

Chcete-li maximalizovat přínosy Lighthouse CI, dodržujte tyto osvědčené postupy:

• Spouštějte Lighthouse CI pravidelně: Integrujte Lighthouse CI do vašeho CI/CD procesu, aby se audity spouštěly automaticky s každým commitem nebo pull requestem. Tím zajistíte, že regrese výkonu budou odhaleny včas a rychle řešeny.
• Nastavte realistické rozpočty výkonu: Definujte rozpočty výkonu, které jsou náročné, ale dosažitelné. Začněte s konzervativními rozpočty a postupně je zpřísňujte, jak se výkon vašeho webu zlepšuje. Zvažte nastavení různých rozpočtů pro různé typy stránek v závislosti na jejich složitosti a důležitosti.
• Zaměřte se na klíčové metriky: Upřednostněte klíčové metriky výkonu, které mají největší dopad na uživatelský zážitek a obchodní výsledky. Core Web Vitals od Google (LCP, FID a CLS) jsou dobrým výchozím bodem.
• Vyšetřujte a řešte problémy s výkonem: Když Lighthouse CI identifikuje problémy s výkonem, důkladně je prozkoumejte a implementujte vhodná řešení. Použijte reporty Lighthouse k identifikaci hlavních příčin problémů a upřednostněte nejúčinnější opravy.
• Monitorujte výkon v průběhu času: Sledujte metriky výkonu v čase, abyste identifikovali trendy a vzorce. Použijte Lighthouse CI server nebo jiné monitorovací nástroje k vizualizaci dat o výkonu a identifikaci oblastí pro zlepšení.
• Vzdělávejte svůj tým: Ujistěte se, že váš tým rozumí důležitosti výkonu frontendu a jak efektivně používat Lighthouse CI. Poskytněte školení a zdroje, které jim pomohou zlepšit jejich dovednosti a znalosti.
• Zvažte globální síťové podmínky: Při nastavování rozpočtů výkonu zvažte síťové podmínky v různých částech světa. Uživatelé v oblastech s pomalejším internetovým připojením mohou mít jiný zážitek než uživatelé v oblastech s rychlejším připojením. Používejte nástroje k simulaci různých síťových podmínek během testování.
• Optimalizujte obrázky: Optimalizace obrázků je klíčovým aspektem výkonu frontendu. Používejte nástroje jako ImageOptim, TinyPNG nebo online konvertory ke kompresi a optimalizaci obrázků bez ztráty kvality. Používejte moderní formáty obrázků jako WebP, které nabízejí lepší kompresi a kvalitu než tradiční formáty jako JPEG a PNG. Implementujte líné načítání (lazy loading) pro obrázky, které nejsou okamžitě viditelné ve viewportu.
• Minifikujte a komprimujte kód: Minifikujte svůj HTML, CSS a JavaScript kód, abyste zmenšili velikost souborů. Používejte nástroje jako UglifyJS, Terser nebo online minifikátory. Povolte na svém serveru kompresi Gzip nebo Brotli, abyste dále zmenšili velikost přenášených souborů.
• Využívejte mezipaměť prohlížeče (caching): Nakonfigurujte svůj server tak, aby nastavoval vhodné cache hlavičky pro statické zdroje jako jsou obrázky, CSS a JavaScript soubory. To umožňuje prohlížečům ukládat tyto zdroje do mezipaměti a vyhnout se jejich opakovanému stahování.

Závěr

Integrace Lighthouse CI do vašeho vývojového procesu je klíčovým krokem k budování vysoce výkonných, přístupných a SEO-přátelských webových stránek. Automatizací testování výkonu frontendu a sledováním výkonu v průběhu času můžete včas identifikovat a řešit problémy s výkonem, zlepšit uživatelský zážitek a dosahovat lepších obchodních výsledků. Osvojte si Lighthouse CI a udělejte z neustálého zlepšování výkonu základní hodnotu vašeho vývojového procesu. Pamatujte, že výkon webu není jednorázová záležitost, ale nepřetržitý proces, který vyžaduje neustálou pozornost a optimalizaci. Zvažte kulturní a regionální faktory, abyste zajistili bezproblémový zážitek pro všechny své uživatele bez ohledu na jejich polohu nebo zařízení. Dodržováním osvědčených postupů uvedených v tomto článku můžete zajistit, že váš web bude poskytovat rychlý, spolehlivý a příjemný zážitek uživatelům po celém světě.